<template>
    <div>
        <!-- 菜单列表 应该是一个列表 进入页面自动发请求获取列表数据-->
        <!-- data 表格的数据 父传子 -->
        <!-- row-key 选择元素节点的方式 -->
        <!-- default-expand-all 默认展开所有节点 -->
        <!-- tree-props 树形节点的配置项 -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
            <el-table-column prop="id" label="ID" width="80"> </el-table-column>
            <el-table-column prop="rolename" label="角色名称" width="180"> </el-table-column>
            <el-table-column prop="status" label="状态" width="70">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" circle
                        @click="edit(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" circle
                        @click="del(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
// import router from "@/router";
import { getRoleList,delRole} from '../../apis'
export default {
    data() {
        return {
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let res = await getRoleList()
            this.tableData = res.list;
        },
        // 编辑--分两步1.获取老数据 2.提交新数据
        edit(data) {
            // 子传父 打开弹窗 展示这些数据
            this.$emit('edit', data)
        },
        // 删除
        del(id) {
            // console.log(id);
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                // 点击确定执行这里
                .then(async () => {
                    // 真的删除
                    let res = await delRole(id);
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        // 更新数据
                        this.tableData = res.list;
                    }
                })
                // 点击取消执行这里
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style>

</style>
